<template>
	<view class="order">
		<view class="header_swiper" >
			<view class="header_swiper_box" v-for="(item,index) in navList" :key="index" @click="changeItem(item,index)">
				<view class="header_swiper_item" :class="{'on':index == headerIndex}">{{item.name}}</view>
				<view class="h_line" v-show="index == headerIndex"></view>
			</view>
		</view>
		<view class="order_body">
			<view class="order_li" v-for="(el,elindex) in dataList" :key='elindex'>
				<view class="li_order_number"><text class="text0">订单号：</text> <text class="text1">{{el.orderNo}}</text></view>
				<view class="li_order_time">
					<text class="time">{{el.createTime}}</text>
					<block v-if="el.status == 1">
						<text>待付款</text>
					</block>
					<block v-else-if="el.status == 2">
						<text>已完成</text>
					</block>
					<block v-else-if="el.status == 3">
						<text>已取消</text>
					</block>
				</view>
				<view class="li_order_info">
					<image :src="el.cover" mode="aspectFill"></image>
					<view class="info_right">
						<text class="name">{{el.cardName}}</text>
						<text class="subtitle">{{el.storeName}}</text>
						<view class="price">
							<text class="num">X1</text>
							<text class="priceInfo"><text>￥</text>{{el.payMoney}}</text>
						</view>
					</view>
				</view>
				<view class="order_payment">
					<view class="pay_time disRow" >
						<block v-if="el.status == 1 && (el.issueType == 1 || el.issueType == 3)">
							<text>支付剩余：</text>
							<uni-countdown  :show-day="false" :fontSize="13" color="#EE3225" splitorColor="#EE3225"  :hour="el.time.hours" :minute="el.time.minutes" :second="el.time.seconds" @timeup="timeup(elindex)"></uni-countdown>
						</block>
						<block v-if="el.status == 1 && el.issueType == 2">
							<text>付款截止：</text>
							<view >{{el.payTime}}</view>
						</block>
					</view>
					<view class="pay_button">
						<!-- <block v-if="el.status == 3 ||( el.status == 1 && el.time.timeStatus == false)"> -->
						<block v-if="el.status == 2 && el.issueType == 2 && el.isIssueCard == false">
							<view class="pButton determine" >权益卡待发放</view>
						</block>
<!-- 						<block v-else-if="el.status == 2 && el.issueType == 2 && el.isIssueCard == true">
							<view class="pButton determine" @click="myQyFunc(el.customerCardId)" v-if="el.donationStatus == 1">我的权益</view>
							<view class="pButton color_c7c3c3" v-else>已转赠</view>
						</block> -->
						<block v-else-if="el.status == 3 && el.issueStatus == 1">
							<view class="pButton determine" @click="myCardFunc(el.equityCardId)">查看卡详情</view>
						</block>
						<block v-else-if="el.status == 2">
							<!-- <view class="pButton determine" @click="myQyFunc(el.customerCardId)">我的权益</view> -->
							<view class="pButton determine" @click="myQyFunc(el.customerCardId)" v-if="el.donationStatus == 1">我的权益</view>
							<view class="pButton color_c7c3c3" v-if="el.donationStatus == 3">已销毁</view>
							<view class="pButton color_c7c3c3" v-if="el.donationStatus == 2">已转赠</view>
						</block>
						<block v-else-if="el.status == 1 && el.issueType == 2" >
							<view class="pButton determine" @click="payorder(el)">立即支付</view>
						</block>
						<block v-else-if="el.status == 1 && (el.issueType == 1 || el.issueType == 3)" >
							<view class="pButton cancel" @click="cancel(el)">取消订单</view>
							<view class="pButton determine" @click="payorder(el)">立即支付</view>
						</block>

					</view>
				</view>
			</view>
	
		</view>
		  <view class="no_info" v-if="dataList.length == 0 ">
		  	<image src="/static/my/order_no.png" mode="widthFix"></image>
		  	<text>暂无订单</text>
		  </view>
		  
		 <uni-popup ref="popupOrder" type="dialog">
		  		<uni-popup-dialog mode="base" :confirmText="'确定'" :title="'提示'"
		  			:content="'是否要取消订单！'" :before-close="true" @close="orderClose"
		  			@confirm="orderConfirm"></uni-popup-dialog>
		 </uni-popup>
		 <uni-popup ref="popup" >
		 	<view class="popup-box">
		 		<view class="popup-title">
		 			提示
		 		</view>
		 		<view class="popup-content" >
		 			该卡已下架
		 		</view>
		 		<view class="popup-button" @click="markClose">
		 			确定
		 		</view>
		 	</view>
		 </uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList:[
					{id:1,name:'全部',status:null},
					{id:2,name:'待付款',status:1},
					{id:3,name:'已完成',status:2},
					{id:4,name:'已取消',status:3},
				],
				dataList:[],
				orderId:null, //订单id
				headerIndex:0,
				issueType:null,
				// more/loading/noMore
				moreStatus:'more',
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
			}
		},
		onLoad(option) {
			this.headerIndex = option.headerIndex
			// this.getOrderList()
		},
		onShow() {
			this.pageNum = 1
			this.dataList = []
			this.getOrderList()
		},
		methods: {
			// 取消订单
			cancel(data){
				 this.orderId = data.id
				 this.issueType = data.issueType
				 this.$refs.popupOrder.open()
			},
			orderConfirm() {
				this.orderClose()
				if(this.issueType == 3){
					this.$api.putRushCancel(this.orderId).then(res=>{
						if(res.code == 200){
							this.$queue.showToast('取消成功')
							this.pageSize= 10 //每页记录数
							this.pageNum = 1 //当前页码
							this.dataList = []
							this.getOrderList()
						}
					})
				}
				else{
					this.$api.setOrderCancel(this.orderId).then(res=>{
						if(res.code == 200){
							this.$queue.showToast('取消成功')
							this.pageSize= 10 //每页记录数
							this.pageNum = 1 //当前页码
							this.dataList = []
							this.getOrderList()
						}
					})
				}

			},
			orderClose() {
				this.$refs.popupOrder.close()
			},
			// 权益卡详情
			myQyFunc(id){
				// window.location.href = '/pages/my/equity-card/equity-card?id=' +id
				uni.navigateTo({
					url:'/pages/my/equity-card/equity-card?id='+id
				})
			},
			// 卡详情
			async myCardFunc(id){
				var res = await this.$api.equityCardIsShelves(id)
				if(res.result){
					uni.navigateTo({
						url:'/pages/index/card-details/card-details?id='+id
					})
				}else{
					this.$refs.popup.open()
				}

			},
			markClose(){
				this.dataList = []
				this.pageNum = 1 //当前页码
				this.getOrderList()
				this.$refs.popup.close()
			},
			timeup(index){
				this.dataList[index].status = 3
			},

			//立即支付
			payorder(el){
				// uni.navigateTo({
				// 	url:'/pages/pay/order-details?orderId='+el.id+'&id='+el.equityCardId
				// })
				window.location.href =  '/pages/pay/order-details?orderId='+el.id+'&id='+el.equityCardId
			},
			changeItem(item,index){
				this.headerIndex = index
				this.pageSize= 10 //每页记录数
				this.pageNum = 1 //当前页码
				this.dataList = []
				this.getOrderList()
			},
			async getOrderList() {
				uni.showLoading({ title:'加载中' })
				this.moreStatus = 'loading'
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				if(this.navList[this.headerIndex].status == null){
					 delete data.status
				}else{
					data.status = this.navList[this.headerIndex].status
				}
				try{
					const res = await this.$api.getOrderList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
						this.moreStatus = 'noMore'
					} else {
						this.moreStatus = 'more'
					}
					res.result.records = res.result.records.map(el=>{
						// （1 直接购买 2 预约申购）
					   if(el.issueType != 2){
						   el.time = this.timeQuantum(el.cancelTime)
					   }
					   return el
					})
					
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
				
			},
			
	
			//计算两个时间之间的时间差 多少天时分秒
			timeQuantum(time) {
				time = new Date(time.replace(/-/g, '/')); //获取传入时间 并将其转化为date型
				// time = new Date(time.setMinutes(time.getMinutes() + 15)); //加上15分钟
				var nowTime = new Date(); //获取当前时间
				var timeDifference = time.getTime() - nowTime.getTime();  //时间差的毫秒数
				if(timeDifference < 0 ){
					return {timeStatus: false}
				}else{
					// console.log(time.getTime() +'===='+nowTime.getTime())
					var days = Math.floor(timeDifference / (24 * 3600 * 1000)); //计算出相差天数
					var leave1 = timeDifference % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
					var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
					var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
					var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
					var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
					var seconds = Math.round(leave3 / 1000); //计算相差秒数
					var data = {
						days: days,
						hours: hours,
						minutes: minutes,
						seconds: seconds,
						timeStatus: true
					}
					return data;
				}

			}
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				this.moreShop = 'noMore'
			} else {
				this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				this.getOrderList()
			}
		}
	}
</script>

<style scoped>
	page{
		background: #F8FBFF;
	}
	.order{
		padding-top: 88rpx;
	}
	.header_swiper{
		position: fixed;
		top: 0;
		width: 100%;
		height: 88rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		z-index: 99999;
	}
	.header_swiper_box{
		position: relative;
		
	}
	.header_swiper_item{
		color: #A9B0B9;
		font-size: 32rpx;
	}
	.header_swiper_box .on{
		color: #000000;
	}
	.h_line{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -8rpx;
		width: 60rpx;
		height: 2rpx;		
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 20rpx;
	}
	.order_body{
		width: 686rpx;
		margin: 0 auto;
		padding-bottom: 60rpx;
	}
	.order_li{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 4rpx 8rpx 16rpx #F3F3F3;
		border-radius: 32rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	.order_li .li_order_number{
		display: flex;
		flex-direction: row;
		padding: 22rpx 0;
		color: #000000;
		font-size: 28rpx;
		border-bottom: 1rpx solid #EDEDED;
	}
/* 	.order_li .li_order_number .text0{
		width: 120rpx;
	} */
	.order_li .li_order_number .text1{
		width: 520rpx;
		word-break: break-all;
	}
	.order_li .li_order_time{
		padding: 20rpx 0 24rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.order_li .li_order_time{
		color: #000000;
		font-size: 28rpx;
		border-bottom: 1rpx solid #EDEDED;
	}
	.order_li .li_order_time .time{
		color: #666666;
	}
	.order_li .li_order_info{
		padding: 24rpx 0;
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #EDEDED;
	}
	.order_li .li_order_info image{
		border-radius: 16rpx;
		width: 146rpx;
		height: 146rpx;
		margin-right: 10rpx;
	}
	.order_li .li_order_info .info_right{
		display: flex;
		flex-direction: column;
		width: 480rpx;
	}
	.info_right .name{
		font-size: 30rpx;
		line-height: 40rpx;
		color: #000000;
	}
	.info_right .subtitle{
		ont-weight: 400;
		font-size: 26rpx;
		line-height: 34rpx;
		color: #333333;
		margin-top: 10rpx;
	}
	.info_right .price {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		margin-top: 10rpx;
		color: #333333;
		font-size: 26rpx;
		line-height: 34rpx;
	}
	.info_right .price .priceInfo{
		color: #000000;
		font-size: 40rpx;
	}
	.info_right .price .priceInfo text{
		font-size: 28rpx;
	}
	.order_payment{
		padding: 24rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.disRow{
		display: flex;
		flex-direction: row;
	}
	.order_payment .pay_time{
		color: #666666;
		font-size: 26rpx;
	}

	.order_payment .pay_button{
		display: flex;
		flex-direction: row;
	}
	.order_payment .pay_button .pButton{
		padding: 16rpx 30rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		/* line-height: 70rpx; */
		text-align: center;
	}
	.order_payment .pay_button .cancel{
		border: 1rpx solid #999999;
		color: #666666;
	}
	.order_payment .pay_button .determine{
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		margin-left: 20rpx;
		color: #FFFFFF;
	}
	.order_payment .pay_button .color_c7c3c3{
		background: #c7c3c3;
		margin-left: 20rpx;
		color: #FFFFFF;
	}
	
	/* 弹窗信息 */
	.popup-box{
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-title{
		padding-top: 40rpx;
		padding-bottom: 34rpx;
		font-weight: 400;
		font-size: 38rpx;
		color: #000000;
	}
	.popup-content{
	    width: 460rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 30rpx;
		line-height: 40rpx;
		color: #333333;
	}
	.popup-button{
		border-top:2rpx solid #f0f0f0;
		width: 100%;
		margin-top: 40rpx;
		text-align: center;
		padding-top: 20rpx;
		font-weight: 400;
		font-size: 34rpx;		
		color: #0B87F2;
	}
</style>
